<template>
    <!--<div>
      全国地震灾害风险区划图
    </div>-->
  <div style="position: relative;height: 100%;">
    <!--图层选择-->
    <div style="padding:20px;">
      <span style="color:#606266;">可选图层：</span>
      <el-checkbox v-model="checkBool1" label="抗震能力" @change="changeCheckBox3" />
      <el-checkbox v-model="checkBool2" label="人员伤亡" @change="changeCheckBox4" />
      <el-checkbox v-model="checkBool3" label="经济损失" @change="changeCheckBox5" />
      <el-select v-model="intensity" placeholder="请选择烈度" clearable style="width:120px;margin-left: 125px;">
        <el-option v-for="item in intensityData" :key="item.id" :label="item.name" :value="item.id">
        </el-option>
      </el-select>
    </div>
    <!--地图模块-->
    <Index v-if="showBool" :dataType="dataType" :form="form" :intensity="intensity"></Index>
  </div>
</template>
  
<script setup name="earthquakeDisasterRisk">
//地图
import Index from '@/map/thematicMap/divisionClass/earthquakeDisasterRisk/index.vue';
import {getSingle} from '@/api/thematicMap/divisionClass/earthquakeDisasterRisk.js';

//类型
const dataType = ref("singleRiskZonationConfirm");
const data = reactive({
  form:{
    // level2DataType:"singleRiskZonationConfirmKznl",
    level3DataType:"singleRiskZonationConfirmKznl",
    assessType:"seismicEd",
    range:{},//四个临界值设置;新疆、青海和西藏地区四个临界值设置
    show:false,
  },
  intensityData:[
    {id:"ld1",name:"Ⅵ度（6度）"},
    {id:"ld2",name:"Ⅶ度（7度）"},
    {id:"ld3",name:"Ⅷ度（8度）"},
    {id:"ld4",name:"Ⅸ度（9度）"},
    {id:"ld5",name:"Ⅹ度（10度）"},
  ]
})
const { form,intensityData } = toRefs(data)
const showBool = ref(false);
const checkBool1 = ref(true);
const checkBool2 = ref(false);
const checkBool3 = ref(false);
const intensity = ref("");

const form1 = ref({});//抗震能力/极限状态四个临界值设置
const form2 = ref({});//死亡人数四个临界值设置
const form3 = ref({});//直接经济损失/区域内上年度 GDP四个临界值设置
//根据类型查询四个临界值设置
const getSingleData = (type) => {
  getSingle({ type }).then(res => {
    if (res.code == 200) {
      if (type == '1') {
        form1.value = res.data
      } else if (type == '2') {
        form2.value = res.data
      } else {
        form3.value = res.data
      }
      changeCheckBox3(true);//显示抗震能力
    }
  })
}

//全国地震灾害风险区划图（抗震能力）
function changeCheckBox3(bool){
  if(bool){
    form.value = {
      // level2DataType:"singleRiskZonationConfirmKznl",
      level3DataType:"singleRiskZonationConfirmKznl",
      assessType:"seismicEd",
      range:form1.value,//四个临界值设置
      show:true,
    };
  }else{
    form.value = {
      // level2DataType:"singleRiskZonationConfirmKznl",
      level3DataType:"singleRiskZonationConfirmKznl",
      assessType:"seismicEd",
      range:form1.value,//四个临界值设置
      show:false,
    };
  }
}

//全国地震灾害风险区划图（人员伤亡）
function changeCheckBox4(bool){
  if(bool){
    form.value = {
      // level2DataType:"singleRiskZonationConfirmRk",
      level3DataType:"singleRiskZonationConfirmRk",
      assessType:"personCasualtiesEd",
      range:form2.value,//四个临界值设置;新疆、青海和西藏地区四个临界值设置
      show:true,
    };
  }else{
    form.value = {
      // level2DataType:"singleRiskZonationConfirmRk",
      level3DataType:"singleRiskZonationConfirmRk",
      assessType:"personCasualtiesEd",
      range:form2.value,//四个临界值设置;新疆、青海和西藏地区四个临界值设置
      show:false,
    };
  }
}

//全国地震灾害风险区划图（经济损失）
function changeCheckBox5(bool){
  if(bool){
    form.value = {
      // level2DataType:"singleRiskZonationConfirmJj",
      level3DataType:"singleRiskZonationConfirmJj",
      assessType:"economicLossesEd",
      range:form3.value,//四个临界值设置;新疆、青海和西藏地区四个临界值设置
      show:true,
    };
  }else{
    form.value = {
      // level2DataType:"singleRiskZonationConfirmJj",
      level3DataType:"singleRiskZonationConfirmJj",
      assessType:"economicLossesEd",
      range:form3.value,//四个临界值设置;新疆、青海和西藏地区四个临界值设置
      show:false,
    };
  }
}

onMounted(() => {
  showBool.value = true;
  //根据类型查询四个临界值设置
  // getSingleData('1');
  // getSingleData('2');
  // getSingleData('3');
  //显示抗震能力
  changeCheckBox3(true);
})
</script>
  
<style scoped lang="scss">
  
</style>
  
  